import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, PixelRatio, ScrollView } from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { Common } from '../../../component/common/Common';

const scale = GLOBAL.SCALE;
const echartIcon = require('../../../imgs/global/echart.png');
const selectTypes = {
	first: [{
		value: '100',
		id: '0'
	}, {
		value: '200',
		id: '111111'
	}, {
		value: '300',
		id: '22222'
	}],
	two: [{
		value: '2018-08-01',
		id: '1'
	}, {
		value: '2018-08-02',
		id: '1'
	}]
}

export class CurrencyPricePage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '汇率牌价',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} />,
			headerTintColor: style.color.dark,
			headerStyle: style.headTow.headerStyleWidthBorder,
			headerTitleStyle: style.headTow.headerTitleStyle,
		}

	};

	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			selectLeftValue: '100',
			selectRightValue: '2018-08-01',
			checkedLeftIndex: 0,
			checkedRightIndex: 0
		}
	}

	componentWillMount () {
		this._getCurrencyPriceList({
			pageNo: 1,
			pageSize: 10,
		});
	}

	async _getCurrencyPriceList (params) {
		let reqProductPrice = params;
		let responseData = await HTTP.POST(API_GENERATE(API.EXCHANGE_PRICE_LIST), reqProductPrice);
		if (responseData && responseData.rows.length) {
			this.setState({
				priceList: responseData.rows,
				pageStatus: {
					status: 'data'
				}
			})
		} else {
			this.setState({
				pageStatus: {
					status: 'empty',
					emptyText: '还没有计划哦~'
				}
			})
		}
	}

	_selectProductPrice (item, key, index) {
		const { selectItems, selectLeftValue, selectRightValue, checkedLeftIndex, checkedRightIndex } = this.state;
		this.setState({
			showLeftSelectList: false,
			showRightSelectList: false,
			selectLeftValue: key === 'first' ? item.value : selectLeftValue,
			selectRightValue: key === 'two' ? item.value : selectRightValue,
			checkedLeftIndex: key === 'first' ? index : checkedLeftIndex,
			checkedRightIndex: key === 'two' ? index : checkedRightIndex
		})
		this._getCurrencyPriceList();
	}

	render () {
		const { pageStatus, showSelectList, selectItems, selectLeftValue, selectRightValue, showLeftSelectList, showRightSelectList,
			checkedIndex, checkedLeftIndex, checkedRightIndex, priceList } = this.state;

		const label = <View style={styles.priceListItem}>
			<Text style={[styles.priceListItemValue, { color: style.color.darkGray }]}>现汇买入</Text>
			<Text style={[styles.priceListItemValue, { color: style.color.darkGray }]}>现钞买入</Text>
			<Text style={[styles.priceListItemValue, { color: style.color.darkGray }]}>现汇卖出</Text>
			<Text style={[styles.priceListItemValue, { color: style.color.darkGray }]}>现钞卖出</Text>
			<Text style={[styles.priceListItemValue, { color: style.color.darkGray }]}>中行折算</Text>
		</View>
		return (
			<View style={styles.container}>
				{
					pageStatus.status === 'data' ? (
						<ScrollView style={{ height: '100%' }}>
							<View>
								{
									priceList.map((item, index) => {
										return (
											<View key={index}>
												<View style={styles.priceListLabelsCont}>
													<Text style={styles.priceListLabel}>{item.exchangeCnyName}</Text>
													<Image style={styles.echartIcon} source={echartIcon} />
												</View>
												<TouchableOpacity style={styles.priceListItemCont} onPress={() => {
													this.props.navigation.navigate('CurrencyPriceDetail', { data: item, title: '汇率牌价' });
												}} >
													<View style={styles.priceListItem}>
														<Text style={styles.priceListItemValue}>{item.xhbPrice}</Text>
														<Text style={styles.priceListItemValue}>{item.xcbPrice}</Text>
														<Text style={styles.priceListItemValue}>{item.xhsPrice}</Text>
														<Text style={styles.priceListItemValue}>{item.xcsPrice}</Text>
														<Text style={styles.priceListItemValue}>{item.pbocPrice}</Text>
													</View>
													{label}
												</TouchableOpacity>
											</View>
										)

									})
								}
							</View>
						</ScrollView>
					) : (<PageStatusIndex {...pageStatus} />)
				}
			</View>

		)
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	selectTypes: {
		flexDirection: 'row',
		justifyContent: 'center',
	},
	priceListLabelsCont: {
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: '#F6F6F6',
		height: 30 * scale,
	},
	priceListLabel: {
		flex: 1,
		fontSize: 12 * scale,
		color: style.color.darkGray,
		marginLeft: 15 * scale
	},
	priceListItemCont: {
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
	},
	priceListItem: {
		flexDirection: 'row',
		alignItems: 'center',
		height: 30 * scale,
	},
	priceListItemValue: {
		flex: 1,
		textAlign: 'center',
		fontSize: 13 * scale,
		color: style.color.normal,
	},
	priceListItemLabel: {
		width: '25%',
		fontSize: 12 * scale,
		textAlign: 'center',
		color: style.color.darkGray,
	},
	echartIcon: {
		width: 18 * scale,
		height: 18 * scale,
		marginRight: 15 * scale
	}
})